<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>列表渲染_基本列表</title>
    <!--引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
   </head>

<body>

    <!-- 
        v-for指令：
            1、用于展示列表数据
            2、语法：v-for="(item,index) in xxx" :key="yyy"
            3、可遍历：数组、对象、字符串(用的很少)、指定次数(用的很少)
     -->




    <!--准备好一个容器-->
    <div id="root">
         <!-- 
            ul标签和li标签一起使用，创建标签无序列表
            p:可以看作是一个形参从persons数组里获取数据
         -->

        <!-- 遍历数组 -->
        <h2>人员列表(遍历数组)</h2>      
        <ul>
      <!-- <li v-for="p in persons" :key="p.id">
         {{p.name}}-{{p.age}}
      </li>      -->
      <!-- 
          p代表persons数组中的某一个元素
          index代表当前元素的下标
       -->
      <li v-for="(p,index) in persons"  :key="index">
        {{p.name}}-{{p.age}}
      </li>   
        </ul>
        


        <!-- 遍历对象 -->
        <h2>汽车信息(遍历对象)</h2>
        <ul>
         <li v-for="(value,key) in car" :key="key">
        {{key}}-{{value}}
          </li>   
        </ul>


        <!-- 遍历字符串 (用的少)-->
        <h2>测试遍历字符串</h2>
        <ul>
         <li v-for="(char,index) in str" :key="index">
        {{char}}-{{index}}
          </li>   
        </ul>


        <!-- 遍历次数 (用的少)-->
        <h2>测试遍历字符串</h2>
        <ul>
         <li v-for="(number,index) in 5" :key="index">
        {{number}}-{{index}}
          </li>   
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成使用生产版本提示。

    new Vue({
        el:'#root',
        data:{
            persons:[  // 多个人使用数组存储信息
                {id:'001',name:'南风一号',age:'18'},
                {id:'002',name:'南风二号',age:'20'},
                {id:'003',name:'南风三号',age:'22'}
            ],
            car:{
                price:'70万',
                color:'白色',
                name:'奔驰'
            },
            str:'hello'
        }
    })
</script>
</html>

